<template>
   <div>
       <el-tabs v-model="activeName" @tab-click="handleClick">
           <el-tab-pane label="所有任务" name="first">
               <el-table
                   :default-sort = "{prop: 'task_id', order: 'ascending'}"
                   :row-class-name="tableRowClassName"
                   :data="all"
                   border
                   stripe
                   style="width: 100%">
                   <el-table-column
                       prop="task_id"
                       sortable
                       align='center'
                       label="任务ID">
                   </el-table-column>
                   <el-table-column
                       prop="task_title"
                       align='center'
                       label="任务名称">
                   </el-table-column>
                   <el-table-column
                       prop="tag"
                       align='center'
                       label="分类">
                   </el-table-column>
                   <el-table-column
                       align='center'
                       label="内容">
                       <template slot-scope="scope">
                           <el-popover trigger="hover" placement="top">
                               <p>任务内容:</p>
                               <p>{{ scope.row.task_des }}</p>
                               <div slot="reference" class="name-wrapper">

                                   <p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> {{scope.row.task_des}}</p>
                               </div>
                           </el-popover>
                       </template>
                   </el-table-column>
                   <el-table-column
                       align='center'
                       prop="createdAt"
                       label="发布日期">
                   </el-table-column>
                   <el-table-column
                       align='center'
                       prop="nickname"
                       label="发布人">
                   </el-table-column>
                   <el-table-column
                       align='center'
                       prop="task_price"
                       sortable
                       label="任务价格">
                   </el-table-column>

               </el-table>
           </el-tab-pane>
           <el-tab-pane label="首页任务" name="second">
               <el-table
                   :default-sort = "{prop: 'task_id', order: 'ascending'}"
                   :row-class-name="tableRowClassName"
                   :data="index"
                   border
                   stripe
                   style="width: 100%">
                   <el-table-column
                       prop="task_id"
                       sortable
                       align='center'
                       label="任务ID">
                   </el-table-column>
                   <el-table-column
                       prop="task_title"
                       align='center'
                       label="任务名称">
                   </el-table-column>
                   <el-table-column
                       prop="tag"
                       align='center'
                       label="分类">
                   </el-table-column>
                   <el-table-column
                       align='center'
                       label="内容">
                       <template slot-scope="scope">
                           <el-popover trigger="hover" placement="top">
                               <p>任务内容:</p>
                               <p>{{ scope.row.task_des }}</p>
                               <div slot="reference" class="name-wrapper">

                                   <p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> {{scope.row.task_des}}</p>
                               </div>
                           </el-popover>
                       </template>
                   </el-table-column>
                   <el-table-column
                       align='center'
                       prop="createdAt"
                       label="发布日期">
                   </el-table-column>
                   <el-table-column
                       align='center'
                       prop="nickname"
                       label="发布人">
                   </el-table-column>
                   <el-table-column
                       align='center'
                       prop="task_price"
                       sortable
                       label="任务价格">
                   </el-table-column>
                   <el-table-column align='center' label='操作'>
                       <template slot-scope='scope'>
                           <el-button
                               size='small'
                               type='danger'
                               plain
                               @click='handleDeleteGoods(scope.row.task_id,2)'
                           >删除
                           </el-button>
                       </template>
                   </el-table-column>


               </el-table>
           </el-tab-pane>
           <el-tab-pane label="已删任务" name="third">
               <el-table
                   :default-sort = "{prop: 'task_id', order: 'ascending'}"
                   :row-class-name="tableRowClassName"
                   :data="deleted"
                   border
                   stripe
                   style="width: 100%">
                   <el-table-column
                       prop="task_id"
                       sortable
                       align='center'
                       label="任务ID">
                   </el-table-column>
                   <el-table-column
                       prop="task_title"
                       align='center'
                       label="任务名称">
                   </el-table-column>
                   <el-table-column
                       prop="tag"
                       align='center'
                       label="分类">
                   </el-table-column>
                   <el-table-column
                       align='center'
                       label="内容">
                       <template slot-scope="scope">
                           <el-popover trigger="hover" placement="top">
                               <p>任务内容:</p>
                               <p>{{ scope.row.task_des }}</p>
                               <div slot="reference" class="name-wrapper">

                                   <p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> {{scope.row.task_des}}</p>
                               </div>
                           </el-popover>
                       </template>
                   </el-table-column>
                   <el-table-column
                       align='center'
                       prop="createdAt"
                       label="发布日期">
                   </el-table-column>
                   <el-table-column
                       align='center'
                       prop="nickname"
                       label="发布人">
                   </el-table-column>
                   <el-table-column
                       align='center'
                       prop="task_price"
                       sortable
                       label="任务价格">
                   </el-table-column>
                   <el-table-column align='center' label='操作'>
                       <template slot-scope='scope'>
                           <el-button
                               size='small'
                               type='danger'
                               plain
                               @click='handleDeleteGoods(scope.row.task_id,3)'
                           >取消删除
                           </el-button>
                       </template>
                   </el-table-column>


               </el-table>
           </el-tab-pane>

       </el-tabs>
   </div>
</template>

<script>
    import axios from 'axios'
    export default {
        data(){
            return{
                activeName: 'first',
                all: [],
                index:[],
                deleted:[]
            }
        },
        methods:{
            init(){
                axios.post('/api/task/all').then(res=>{
                    if(res.data.err_code==0){
                        this.all=res.data.data;
                    }
                });
                axios.post('/api/task/index').then(res=>{
                    if(res.data.err_code==0){
                        this.index=res.data.data;
                    }
                });
                axios.post('/api/task/deleted').then(res=>{
                    if(res.data.err_code==0){
                        this.deleted=res.data.data;
                    }
                });
            },
            handleDeleteGoods(id,type){
                console.log(id);
                console.log(type)
                if(type==3){
                    axios.post('/api/task/cancelDel',{task_id:id}).then(res=>{
                        if(res.data.err_code==0){
                            this.$message('取消删除成功')
                        }else{
                            this.$message('取消删除失败')
                        }
                        this.init();
                    }).catch(err=>{
                        this.$message('取消删除失败');
                        this.init();
                    })
                }else if(type==2){
                    axios.post('/api/task/delete',{task_id:id}).then(res=>{
                        if(res.data.err_code==0){
                            this.$message('删除成功')
                        }else{
                            this.$message('删除失败')
                        }
                        this.init();
                    }).catch(err=>{
                        this.$message('删除失败')
                        this.init();
                    })
                }
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            handleClick(tab, event) {
                console.log(tab, event);
            }
        },
        created(){

           this.init();
        }
    }
</script>

<style scoped>
    .ckxq{

    }
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
